<script setup>
import { ElMessage } from 'element-plus'
import { ref } from 'vue'
import { addApi, updateApi } from '@/api/area'
const emit = defineEmits(['search'])
const isAdd = ref(true)
const ruleFormRef = ref(null)
const dialogVisible = ref(false)
const titleName = ref(null)
const dialogFormData = ref({
  id: null,
  name: null,
  level: null,
  parentId: null
})
const resetForm = () => {
  dialogVisible.value = false
  dialogFormData.value = {
    id: null,
    name: null,
    level: null,
    parentId: null
  }
}
const confirm = async () => {
  let res = null
  if (!isAdd) {
    res = await updateApi(dialogFormData.value)
  } else {
    res = await addApi(dialogFormData.value)
  }
  if (res.code) {
    ElMessage.success('操作成功!')
    resetForm()
    emit('search')
  } else {
    ElMessage.error('操作失败！')
  }
}
defineExpose({
  dialogVisible,
  titleName,
  isAdd,
  dialogFormData
})
</script>
<template>
  <el-dialog v-model="dialogVisible" style="width: 400px;" :title="titleName">
    <el-form ref="ruleFormRef" :model="dialogFormData" :rules="rules">
      <el-row>
        <el-col span="24">
          <el-form-item label="名称" prop="name">
            <el-input v-model="dialogFormData.name" style="width: 300px;" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col span="24">
          <el-form-item label="区域级别" prop="level">
            <el-select v-model="dialogFormData.level" placeholder="请选择" style="width: 100px;">
              <el-option label="省" value="1" />
              <el-option label="市" value="2" />
              <el-option label="区" value="3" />
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="resetForm">取消</el-button>
        <el-button type="primary" @click="confirm">
          确定
        </el-button>
      </div>
    </template>
  </el-dialog>
</template>